<template>
	<view>
		<view class="userData" v-if="list.length">
			
			<view class="list"
			v-for="(item,index) in list" 
			:key="index">
				<view class="title u-f-ac u-f-jsb">
					<view class="l u-f-ac" @click="copyUser(item)">
						<view class="icon"></view>
						<view class="name">
							<text>{{item.title}}</text>
						</view>
					</view>
					<view class="copy" @click="copyUser(item)">
						<text>Copy</text>
					</view>
				</view>
				<view class="note" v-if="item.note" @click="copy(item.note)">
					<text>备注：{{item.note}}</text>
				</view>
				<view class="dataBox">
					<view class="lst u-f-ac u-f-jsb" v-if="item.username">
						<view class="u-f-ac" @longpress="copy('账号 ' + item.password)" @click="copy(item.username)">
							<view class="name">
								<text>账号：</text>
							</view>
							<view class="value line-1">
								<text>{{item.username}}</text>
							</view>
						</view>
						<view class="u-f-ajc">
							<u-button type="primary" @click="copy(item.username)" text="复制账号" size="mini"></u-button>
						</view>
					</view>
					<view class="lst u-f-ac u-f-jsb" v-if="item.password">
						<view class="u-f-ac" @longpress="copy('密码 ' + item.password)" @click="copy(item.password)">
							<view class="name">
								<text>密码：</text>
							</view>
							<view class="value">
								<text>{{item.password}}</text>
							</view>
						</view>
						<view class="u-f-jsb">
							<u-button type="primary" @click="copy(item.password)" text="复制密码" size="mini"></u-button>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		
		<view style="margin-top: 60rpx;">
			<no-data msg="该笔记没有记录账号 !" v-if="!list.length"></no-data>
		</view>
	</view>
</template>

<script>
	import noData from './no-data'
	export default {
		props:{
			list:Array
		},
		// 注册组件
		components:{ noData },
		methods:{
			copyUser(item){
			this.copy(`${item.title}
			账号 : ${item.username}
			密码 : ${item.password}
			备注 : ${item.note}
			`)
						}
		}
	}
</script>

<style scoped lang="scss">
.userData{
	padding: 20px 30rpx;
	.list{
		.title{
			.icon{
				height: 18rpx;
				width: 8rpx;
				margin-right: 10rpx;
				background-color: #ff5d50;
			}
			.name{
				font-size: 30rpx;
				color: #4E4C56;
			}
			.copy{
				color: #e8e8e8;
				margin-left: 20rpx;
				font-size: 24rpx;
			}
		}
		.dataBox{
			background-color: #f8f8f8;
			padding: 0 20rpx;
			margin: 25rpx 0;
			border-radius: 10rpx;
			.lst{
				margin: 10rpx 0;
				padding: 20rpx 0;
				&:nth-of-type(1){
					border-bottom: 1px solid #f5f5f5;
				}
				.name{
					font-size: 28rpx;
					color: #4E4C56;
					flex-shrink: 0;
				}
				.value{
					font-size: 28rpx;
					padding: 5rpx 20rpx;
					color: #4f83ca;
				}
			}
		}
		.note{
			font-size: 24rpx;
			color: #6b6b6b;
			margin-top: 10rpx;
		}
	}
}
</style>